<template>
    <div class="wrapper">
        <div class="load-container">
            <div style="display: flex; flex-direction: column; justify-content: center ">
                <img src="../../../../img/loading.gif">
                <p>
                    <slot></slot>
                </p>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    name: "loadingBox"
}
</script>

<style scoped>
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .load-container {
        width: 150px;
        height: 150px;
        border-radius: 10px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    img {
        margin-right: auto;
        margin-left: auto;
        width: 90px;
        height: 90px;
    }

    p {
        font-size: small;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f1929d;
    }
</style>